<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" href="../../css/animate.css">
		<link rel="stylesheet" href="../../iconfont/iconfont.css">
		<link rel="stylesheet" href="../../css/mescroll.css">
		<link rel="stylesheet" href="../../css/gloab.css">
		<link href="../../libs/quill_snow.css" rel="stylesheet">
		<title>发布红包</title>
		<style>
			.name{
      overflow-y: hidden;
    }
    .select{
        background-color: white;
    }
  </style>
	</head>
	<body>
		<div id="app">
			<div id="public-header">
				<div id="statusbar"></div>
				<header class="public-header">
					<div class="public-header-lf iconfont icon-fanhui" @click="api.closeWin()"></div>
					<div class="public-header-title">发布红包</div>
				</header>
			</div>
			<div class="fabu-body" style="padding-bottom:0.24rem;">
				<div class="form-son-input">
					<select class="select" id="select1" style="width:100%;" name="" v-model="type" disabled="disabled">
						<option style="width:100%;" value="">选择广告类型</option>
						<option style="width:100%;" value="1">普通广告</option>
						<option style="width:100%;" value="2">加粉中心</option>
					</select>
					<!-- <div class="form-son-label iconfont icon-xiala"></div> -->
				</div>
				<div class="form-son-input">
					<select class="select" id="select2"  style="width:100%;" disabled="disabled">
						<option style="width:100%;">红包大厅</option>
					</select>
					<!-- <div class="form-son-label iconfont icon-xiala"></div> -->
				</div>
				<!-- <div class="form-son-input" style="border:none;">
        <textarea  v-model="content" placeholder="提示：发布信息里面的图片不得包括 赌博游戏的界面赌女郎、黄、毒非法信息,系统将定期清理不予退款！禁止发布损害站长利益的同类型信息;二维码如无法上传请截图只保留二维码部分再重试不要包含二维码外部空白等其他部分。" style="outline:none;border:0;width:95%;height:auto;min-height:1.6rem;padding:0.2rem;background-color: #eef2f6;font-size:0.3rem;"></textarea>
      </div> -->
				<div class="article-input">
					<input type="text">
					<p v-if="!is_first && title.length<5">标题字数不可少于5个字</p>
				</div>
				<div class="article-textarea">
					<div id="editor" style="-webkit-user-select:text;min-height:1.8rem;"></div>
				</div>
				<!-- <div class="form-son-presentation">
        提示：发布信息里面的图片不得包括 赌博游戏的界面赌女郎、黄、毒非法信息,系统将定期清理不予退款！禁止发布损害站长利益的同类型信息
      </div> -->
				<div v-if="showa">
					<div class="form-son-title">上传照片<span>(最多6张)</span></div>
					<div class="form-son-upimg flex wrap">
						<div class="form-son-upimg-son" v-for="(item,index) in images" :style="index%3==0?'margin-left:0;':''">
							<img :src="item" alt="" class="form-son-upimg-img">
							<img src="../../image/public/up3.png" alt="" class="form-son-upimg-close" @click="delImg(index)">
						</div>
						<div class="form-son-upimg-btn" :style="images.length%3==0?'margin-left:0;':''" @click="uploadImg"><img src="../../image/public/add.png"
							 alt=""></div>
					</div>
				</div>
				<div v-if="show">
					<div class="form-son-title">上传头像/二维码<span>(最多各1张)</span></div>
					<!-- <div style="width:100%;margin:auto;color:#f00;">注意:第一张请上传头像，第二张上传二维码（否则将被屏蔽）</div> -->
					<div class="form-son-title">头像：</div>
					<div class="form-son-upimg flex wrap">
						<div class="form-son-upimg-son" v-for="(item,index) in avatar" :style="index%3==0?'margin-left:0;':''">
							<img :src="item" alt="" class="form-son-upimg-img">
							<img src="../../image/public/up3.png" alt="" class="form-son-upimg-close" @click="delImger()">
						</div>
						<div class="form-son-upimg-btn" v-if="avatar&&avatar.length<=0" :style="images.length%3==0?'margin-left:0;':''"
						 @click="uploadImger"><img src="../../image/public/add.png" alt=""></div>
					</div>
					<div class="form-son-title">二维码：</div>
					<div class="form-son-upimg flex wrap">
						<div class="form-son-upimg-son" v-for="(item,index) in qrcode" :style="index%3==0?'margin-left:0;':''">
							<img :src="item" alt="" class="form-son-upimg-img">
							<img src="../../image/public/up3.png" alt="" class="form-son-upimg-close" @click="delImgers()">
						</div>
						<div class="form-son-upimg-btn" v-if="qrcode&&qrcode.length<=0" :style="images.length%3==0?'margin-left:0;':''"
						 @click="uploadImgers"><img src="../../image/public/add.png" alt=""></div>
					</div>
					<div style="width:100%;margin:auto;"><span style="color:#f00;">说明：</span>二维码有效期为2个月，若置顶则以置顶结束时间为止</div>
				</div>
				<div class="form-son-input" style="margin-top:0.24rem;position:relative;" v-if="status==2">
					<input type="number" placeholder="红包金额" id="hb" style="box-sizing:border-box;padding-left:0.4rem;" v-model="amount">
					<label for="hb" class="form-son-hb"><img src="../../image/public/hb.png" alt=""></label>
				</div>
				<div class="form-son-input" style="margin-top:0.24rem;position:relative;" v-if="status==2">
					<input type="number" placeholder="红包个数" id="hb1" style="box-sizing:border-box;padding-left:0.4rem;" v-model="num">
					<label for="hb1" class="form-son-hb"><img src="../../image/public/hb.png" alt=""></label>
				</div>
				<div class="form-son-input" style="border-top: 1px dashed #eee;">
					<input type="text" placeholder="发布者昵称" v-model="nickname">
				</div>
				<div class="form-son-input" style="border:none;">
					<input type="text" placeholder="联系微信" v-model="wechat">
					<!-- <span style="color:#f00;">是否添加红包增加曝光度</span> -->
				</div>
			</div>
			<div class="form-son-check">
				<img src="../../image/public/cancel.png" alt="" v-if="terms==1" @click="tick">
				<img src="../../image/public/choose.png" alt="" v-else @click="tick">
				<span @click="javascript:api.openWin({name: 'terms',reload:true,url:'../personal/terms.html',});">我同意发布条款，保证信息合法合规</span>
			</div>
			<div class="form-sm">说明:信息有效期2个月 若置顶则到置顶结束期止</div>
			<div class="form-footer flex">
				<div class="form-footer-lf F2" v-if="price.price">
					价格：<span style="color:red;">{{price.price}}元&nbsp;&nbsp;</span>
					<span style="color:#a9b4be;text-decoration:line-through;">(原价：{{price.origprice}}元)</span>
				</div>
				<div class="form-footer-lf F2" v-else>
					价格：<span style="color:red;">免费&nbsp;&nbsp;</span>
					<span style="color:#a9b4be;text-decoration:line-through;">(原价：{{price.origprice}}元)</span>
				</div>
				<div class="form-footer-rt F1" @click="putOut">立即发布</div>
			</div>
		</div>
		<div class="public-progress" style="z-index:9;">
			<img src="../../icon/icon150x150.png" alt="" class="animated infinite flash" style="width:200px;height:200px;display:block;margin:200px auto;">
		</div>
	</body>
	<script src="../../script/api.js"></script>
	<script src="../../script/jquery.js"></script>
	<script src="../../script/mescroll.js"></script>
	<script src="../../script/vue.js"></script>
	<script src="../../script/app.js"></script>
	<script src="../../script/jsencrypt.js"></script>
	<script src="../../script/fastclick.js"></script>
	<script src="../../libs/quill_min.js"></script>
	<script>
		var vm;
		var quill;
		var UIInput;
		var mescroll;
		apiready = function() {
			setBar("statusbar");
			setFont(750);
			startVue();
			$(".public-progress").fadeOut(1000);
			setTimeout(function() {
				$(".public-progress").css({
					"display": "none"
				});
			}, 1000);
			api.removeLaunchView();
			quill = editor_init();
			listener_editor();
			setTimeout(function() {
				// openInput();
			}, 1000);
		}

		function startVue() {
			vm = new Vue({
				el: "#app",
				data: {
					typeList: [],
					gdtt: ['', '', '', '', '', ''],
					type: 1,
					status: 2,
					nickname: "",
					wechat: '',
					content: '',
					terms: 1,
					amount: '',
					num: '',
					images: [],
					price: [],
					imageser: [],
					show: false,
					showa: true,
					image: [],
					avatar: [],
					qrcode: [],
					is_first: true,
					title: "",
					is_content: false, //发布按钮颜色改变判断
					// imagetype:'',
				},
				created: function() {
					this.getPrice();
					this.getUserInfo();
					this.getTypeList();
				},
				methods: {
					getUserInfo() {
						api.ajax({
							url: apiUrl + '/api/user/index',
							method: 'post',
							data: {
								values: {
									token: $api.getStorage('token'),
								},
							}
						}, function(ret, err) {
							console.log(JSON.stringify(ret.data))
							if (ret.code == 1) {
								vm.nickname = ret.data['nickname'];
								vm.wechat = ret.data['wechat'];
							} else {
								vm.nickname = ret.data['nickname'];
								vm.wechat = ret.data['wechat'];
							}
						});

					},
					//勾选条款
					tick: function() {
						if (vm.terms == 1) {
							vm.terms = 2;
						} else {
							vm.terms = 1;
						}
					},
					//发布
	putOut: function() {
						if (vm.type == "") {
							api.toast({
								msg: '请选择广告类型',
								duration: 2000,
								location: 'middle'
							});
							return;
						}
						if (vm.status == "") {
							api.toast({
								msg: '请选择发布板块',
								duration: 2000,
								location: 'middle'
							});
							return;
						}
						vm.content = quill.container.firstChild.innerHTML;
						if (vm.content.length<="11") {
							api.toast({
								msg: '请输入信息内容大于10个字',
								duration: 2000,
								location: 'middle'
							});
							return;
						}
						if (vm.show == false) {
							if (vm.length == "0") {
								api.toast({
									msg: '请上传至少一张图片',
									duration: 2000,
									location: 'middle'
								});
								return;
							}
						} else {
							if (vm.length == "0") {
								api.toast({
									msg: '请上传至少一张二维码',
									duration: 2000,
									location: 'middle'
								});
								return;
							}
						}
						if (vm.images.length=='0') {
							api.toast({
								msg: '请上传至少一张图片',
								duration: 2000,
								location: 'middle'
							});
							return;
						}
						if (vm.nickname == "") {
							api.toast({
								msg: '请输入发布者昵称',
								duration: 2000,
								location: 'middle'
							});
							return;
						}
						if(vm.wechat==""){
						  api.toast({
						      msg: '请输入联系微信',
						      duration: 2000,
						      location: 'middle'
						  });
						  return;
						}
						console.log(222222222222222222222222222222222222222222222222222222222222222222222222)
						console.log(vm.amount)
						console.log(vm.status)
						if (vm.status == 2) {
							if (vm.amount == "") {
								api.toast({
									msg: '请输入红包金额',
									duration: 2000,
									location: 'middle'
								});
								return;
							}
							if (vm.num == "") {
								api.toast({
									msg: '请输入红包个数',
									duration: 2000,
									location: 'middle'
								});
								return;
							}
							if (vm.amount == 1) {
								if (vm.num > 10) {
									msg('当前红包金额红包个数不得超过10个');
									return;
								}
							}
						}
						if (vm.terms == 1) {
							api.toast({
								msg: '请阅读发布条款，并同意',
								duration: 2000,
								location: 'middle'
							});
							return;
						}
						if (vm.price.price) {
						  var prices = parseInt(vm.price.price)+parseInt(vm.amount);
						}else{
						  var prices = parseInt(vm.amount);
						}
						if (vm.type == 2) {
							if (vm.avatar[0] == '') {
								msg('请至少上传一张头像');
								return;
							}
							if (vm.qrcode[0] == '') {
								msg('请至少上传一张二维码');
								return;
							}
							vm.images.push(vm.avatar[0]);
							vm.images.push(vm.qrcode[0]);
						}
						var newStr = "";
						newStr += "{";
						for (var i = 0; i < vm.images.length; i++) {
							newStr += '"file' + i + '":"' + vm.images[i] + '",';
						}
						newStr += "}";
						api.showProgress({
							title: '努力处理中...',
							text: '先喝杯茶...',
							modal: false
						});
						api.ajax({
							url: apiUrl + '/api/user/publish',
							method: 'post',
							data: {
								values: {
									token: $api.getStorage('token'),
									tid: 1,
									bid:12,
									content: vm.content,
									nickname: vm.nickname,
									price: vm.price.price,
									money:vm.amount,
									num:vm.num,
									wechat:vm.wechat
								},
								files: eval('(' + newStr + ')')
							}
						}, function(ret, err) {
							console.log(JSON.stringify(ret.data))
							if (ret.code == 1) {
								api.hideProgress();
									api.toast({
										msg: '订单已提交，请前往支付',
										duration: 2000,
										location: 'middle'
									});
									setTimeout(function() {
										api.openWin({
											name: 'pay',
											url: './pay.html',
											pageParam: {
												nickname:vm.nickname,
												release_price:prices,
												amount:vm.amount,//红包金额
												price:vm.price.price,//广告费用
												ad:ret.data,
												types:12,
												type:5
											},
											reload:true
										});
									}, 500);

								/* var newStrs = "";
								newStrs += "{";
								for (var i = 0; i < vm.image.length; i++) {
									newStrs += '"file' + i + '":"' + vm.image[i] + '",';
								}
								newStrs += "}";
								api.ajax({
									url: apiUrl + 'api/billing/shangchuan',
									method: 'post',
									data: {
										values: {
											ids: post_en(ret.data),
										},
										files: eval('(' + newStrs + ')')
									}
								},); */

							} else {
								api.hideProgress();
								msg(ret.msg);
							}
						});
					},
					//删除预览图片
					delImg: function(index) {
						vm.images.splice(index, 1);
						Vue.set(vm.images, index, true);
						vm.images.length = vm.images.length - 1;
					},
					//上传图片
					uploadImg: function() {
						if (vm.images.length > 5) {
							api.toast({
								msg: '最多上传6张图片',
								duration: 2000,
								location: 'middle'
							});
							return;
						}
						choose_method(6, 0, vm.images, vm.image)
					},

					//删除预览图片
					delImger: function() {
						vm.avatar = [];
					},
					//删除预览图片
					delImgers: function() {
						vm.qrcode = [];
					},
					//上传图片
					uploadImger: function() {
						if (vm.avatar.length >= 1) {
							api.toast({
								msg: '最多上传1张图片',
								duration: 2000,
								location: 'middle'
							});
							return;
						}
						choose_method(1, 0, vm.avatar, vm.image)
					},
					//上传图片
					uploadImgers: function() {
						if (vm.qrcode.length >= 1) {
							api.toast({
								msg: '最多上传1张图片',
								duration: 2000,
								location: 'middle'
							});
							return;
						}
						choose_method(1, 0, vm.qrcode, vm.image)
					},
					getTypeList: function() {
						api.ajax({
							url: apiUrl + 'api/billing/billingType',
							method: 'post',
							data: {
								values: {
									type: 1,
								},
							}
						}, function(ret, err) {
							if (ret.status) {
								vm.typeList = ret.data;
							} else {
								vm.typeList = ret.data;
							}
						});
					},
					getPrice: function() {
						api.ajax({
							url: apiUrl + '/api/user/getPrice',
							method: 'post',
							data: {
								values: {
									token: $api.getStorage('token'),
								},
							}
						}, function(ret, err) {
							if (ret.code == 1) {
								vm.price = ret.data;
							}else {
								api.toast({
									msg: ret.msg,
									duration: 2000,
									location: 'middle'
								});
							}
						});
					},
				}
			})
		}

		function setColor() {
			var unSelected = "#000";
			var selected = "#999";
			$("#select1").css("color", unSelected);
			$("option").css("color", selected);
			$("#select1").change(function() {
				var selItem = $(this).val();
				if (selItem == $(this).find('option:first').val()) {
					$(this).css("color", unSelected);
				} else {
					$(this).css("color", selected);
				}
			});
			setColors();
		};

		function setColors() {
			var unSelected = "#000";
			var selected = "#999";
			$("#select2").css("color", selected);
			$("option").css("color", unSelected);
			$("#select2").change(function() {
				var selItem = $(this).val();
				if (selItem == $(this).find('option:first').val()) {
					$(this).css("color", selected);
				} else {
					$(this).css("color", unSelected);
				}
			});
		}

		/*
		 * 富文本编辑器初始化
		 * @LastEditors: 田迅
		 * return quill
		 */
		function editor_init() {
			var toolbar = {
				container: [
					['bold', 'italic', 'underline', 'strike', 'blockquote', 'code-block', 'link'], // toggled buttons
					[{
						'list': 'ordered'
					}, {
						'list': 'bullet'
					}],
					[{
						'indent': '-1'
					}, {
						'indent': '+1'
					}], // outdent/indent
					[{
						'size': ['small', false, 'large', 'huge']
					}], // custom dropdown
					[{
						'color': []
					}, {
						'background': []
					}], // dropdown with defaults from theme
					[{
						'align': []
					}],
					['clean'] // remove formatting button
				],
				handlers: {
					//  'image':function(){
					//    this.quill.format('image', false);
					//    setImg();
					//  },
					'link': function(value) {
						if (value) {
							var href = prompt('Enter the URL');
							this.quill.format('link', href);
						} else {
							this.quill.format('link', false);
						}
					}
				}
			}
			return new Quill('#editor', {
				modules: {
					toolbar: toolbar
				},
				placeholder: '提示：发布信息里面的图片不得包括 赌博游戏的界面赌女郎、黄、毒非法信息,系统将定期清理不予退款！禁止发布损害站长利益的同类型信息',
				theme: 'snow'
			});
		}

		/*
		 * 插入内容到编辑器中
		 * @LastEditors: 田迅
		 * @param $keyword:区分是(text)普通文本还是(image)图片，$value:文本值or图片
		 */
		function insert_editor($keyword, $value) {
			var length = quill.getLength();
			// alert(length);
			if ($keyword == "text") {
				quill.insertText(length - 1, $value);
			} else if ($keyword == "image") {
				quill.insertEmbed(length - 1, 'image', $value);
			}
			quill.setSelection(length); //光标位置加1
		}

		/*
		 * 监听富文本编辑器内容变化
		 * @LastEditors: 田迅
		 */
		function listener_editor() {
			quill.on('text-change', function() {
				if (vm.title && vm.title.length >= 5 && $(quill.container.firstChild).children("p").html().trim() != "" && $(
						quill.container.firstChild).children("p").html() != "<br>") {
					vm.is_content = true;
				} else {
					vm.is_content = false;
				}
				//  console.log(quill.container.firstChild.innerHTML);
			});
		}
	</script>
</html>
